import React from 'react'
import fetchJSONP from 'fetch-jsonp'

import { Button, Radio, Icon, Spin, Alert, } from 'antd'

export default class MovieDetail extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            info: {},
            isloading: true
        }
    }

    componentWillMount() {
        fetchJSONP('https://api.douban.com/v2/movie/subject/' + this.props.match.params.id)
            .then(res => res.json())
            .then(data => {
                this.setState({
                    info: data,
                    isloading: false
                })
            })

    }

    render() {
        return (
            <div>
                <Button type="primary" onClick={this.goBack}>
                    <Icon type="left" />
                    返回上一级
                </Button>
                {
                    this.getDetail()
                }
            </div>
        )
    }

    goBack = () => {
        this.props.history.go(-1)
    }

    getDetail = () => {
        if (this.state.isloading) {
            return (
                <Spin tip="Loading...">
                    <Alert
                        message="正在加载"
                        description="稍安勿躁"
                        type="info"
                    />
                </Spin>
            )
        } else {
            return (
                <div>
                    <h1>{this.state.info.title}</h1>
                    <img src={this.state.info.images.large} alt="" />
                    <p>{this.state.info.summary}</p>
                </div>
            )
        }
    }
}